<template>
    <div class="allbuju">
        <div id="top">
            <!--左-->
            <div class="topleft" @click="tiaozhuan"> 
                <!-- 以下语句是为了使用有色图标 -->
                <el-icon style="margin-left:10px;"><CloseBold /></el-icon>
            </div>
            <div class="topContent">
                <span>其他</span>
            </div>
            <div class="topright"> 
                <el-icon style="margin-right:10px;"><MoreFilled /></el-icon>
            </div>
        </div>
        <div id="content">
            <p>便民服务</p>
            <div class="e1">
                <el-icon :size="45" color="deepskyblue"><HomeFilled /></el-icon>
                <span class="t1">家政服务</span>
            </div>
            <div class="e2">
                <el-icon :size="45" color="deepskyblue"><Money /></el-icon>
                <span class="t1">租金</span>
            </div>
            <div class="e3">
                <el-icon :size="45" color="deepskyblue"><User /></el-icon>
                <span class="t1">法律专家</span>
            </div>
            <div class="e4">
                <el-icon :size="45" color="deepskyblue"><Pointer /></el-icon>
                <span class="t1">即刻上门</span>
            </div>
            <div class="e5">
                <el-icon :size="45" color="deepskyblue"><Postcard /></el-icon>
                <span class="t1">境外退税</span>
            </div>
            <div class="e6">
                <el-icon :size="45" color="deepskyblue"><Notebook /></el-icon>
                <span class="t1">个人信用报告</span>
            </div>
            <div class="e7">
                <el-icon :size="45" color="deepskyblue"><SetUp /></el-icon>
                <span class="t1">非税电子化</span>
            </div>
            <div class="e8">
                <el-icon :size="45" color="deepskyblue"><ScaleToOriginal /></el-icon>
                <span class="t1">电子社保卡</span>
            </div>
        </div>
        <div id="content2">
            <p>智慧管家</p>
            <div class="e9">
                <el-icon :size="45" color="deepskyblue"><DocumentCopy /></el-icon>
                <span class="t1">物业公告</span>
            </div>
            <div class="e10">
                <el-icon :size="45" color="deepskyblue"><BellFilled /></el-icon>
                <span class="t1">紧急求助</span>
            </div>
            <div class="e11">
                <el-icon :size="45" color="deepskyblue"><Search /></el-icon>
                <span class="t1">问卷调查</span>
            </div>
            <div class="e12">
                <el-icon :size="45" color="deepskyblue"><Message /></el-icon>
                <span class="t1">投诉表扬</span>
            </div>

        </div>
        <div id="content3">
            <p>便捷生活</p>
            <div class="e13">
                <el-icon :size="45" color="deepskyblue"><Location /></el-icon>
                <span class="t1">周边指南</span>
            </div>
            <div class="e14">
                <el-icon :size="45" color="deepskyblue"><Avatar /></el-icon>
                <span class="t1">云上课堂</span>
            </div>
            <div class="e15">
                <el-icon :size="45" color="deepskyblue"><Shop /></el-icon>
                <span class="t1">商城</span>
            </div>
            <div class="e16">
                <el-icon :size="45" color="deepskyblue"><Phone /></el-icon>
                <span class="t1">投诉表扬</span>
            </div>

        </div>
    </div>
</template>

<script>
import {CloseBold} from '@element-plus/icons'
import {MoreFilled} from '@element-plus/icons'
import {HomeFilled} from '@element-plus/icons'
import {Money} from '@element-plus/icons'
import {User} from '@element-plus/icons'
import {Pointer} from '@element-plus/icons'
import {Postcard} from '@element-plus/icons'
import {Notebook} from '@element-plus/icons'
import {SetUp} from '@element-plus/icons'
import {ScaleToOriginal} from '@element-plus/icons'
import {DocumentCopy} from '@element-plus/icons'
import {BellFilled} from '@element-plus/icons'
import {Message} from '@element-plus/icons'
import {Memo} from '@element-plus/icons'
import {Shop} from '@element-plus/icons'
import {Location} from '@element-plus/icons'
import {Avatar} from '@element-plus/icons'
import {Phone} from '@element-plus/icons'
import {Search} from '@element-plus/icons'
export default{
    name:"bianming",
    methods:{
        //跳转到全部功能页面
        tiaozhuan:function(){
            this.$router.replace('/shouye')
        },
        
    },
    components: {
        CloseBold,
        MoreFilled,
        HomeFilled,
        Money,
        User,
        Pointer,
        Postcard,
        Notebook,
        SetUp,
        ScaleToOriginal,
        DocumentCopy,
        BellFilled,
        Message,
        Search,
        Shop,
        Location,
        Avatar,
        Phone
    }
}
</script>

<style lang="less" scoped>
#top{
        width: 100%;
        height: 50px;
        //弹性布局！！！！！
        display: flex;                 ///！！！！！！
        justify-content: space-between; ///！！！！！！
        align-items: center;//垂直居中
    }
#content{
    height: 200px;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}
#content2{
    height: 130px;
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
}
#content3{
    height: 100px;
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
}
.e1{
    width: 55px;
    height: 75px;
    margin-right: 38px;
    float: left;
}
.e2{
    width: 55px;
    height: 75px;
    margin-right: 38px;
    float: left;
}
.e3{
    width: 55px;
    height: 75px;
    margin-right: 38px;
    float: left;
}
.e4{
    width: 55px;
    height: 75px;
    float: left;
}
.e5{
    width: 55px;
    height: 75px;
    margin-right: 38px;
    float: left;
    margin-top: 13px;
}
.e6{
    width: 55px;
    height: 75px;
    margin-right: 38px;
    float: left;
    margin-top: 13px;
}
.e7{
    width: 55px;
    height: 75px;
    margin-right: 38px;
    float: left;
    margin-top: 13px;
}
.e8{
    width: 55px;
    height: 75px;
    float: left;
    margin-top: 13px;
}
.e9{
    width: 55px;
    height: 75px;
    margin-right: 38px;
    float: left;
    margin-top: 10px;
}
.e10{
    width: 55px;
    height: 75px;
    margin-right: 38px;
    float: left;
    margin-top: 10px;
}
.e11{
    width: 55px;
    height: 75px;
    margin-right: 38px;
    float: left;
    margin-top: 10px;
}
.e12{
    width: 55px;
    height: 75px;
    float: left;
    margin-top: 10px;
}
.e13{
    width: 55px;
    height: 75px;
    margin-right: 38px;
    float: left;
    margin-top: 10px;
}
.e14{
    width: 55px;
    height: 75px;
    margin-right: 38px;
    float: left;
    margin-top: 10px;
}

.e15{
    width: 55px;
    height: 75px;
    margin-right: 38px;
    float: left;
    margin-top: 10px;
}
.e16{
    width: 55px;
    height: 75px;
    float: left;
    margin-top: 10px;
}
.t1{
    font-size: 13px;
}
.e2>.t1{
    margin-left: 13px;
}
</style>